<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色
			         2.porduct_card  设置样式：内边距
					 加阴影，所有内容--居中：text-align：center
					 3.图片边框倒角，外边距？
					 4.小米su7   文字：外边距？ 颜色
					 5.￥279999.00  文字大小，外边距？ 颜色
					 6.已有10万+人评价  颜色 外边距？ 内边距？
			 */
			
			div#product_card{
				width: 300px;  height:545px ;				
				background: #f8f8f8;
				text-align: center;
				border-radius: 5px 5px 5px 5px;	
				box-shadow:0px 0px 10px 10px darkgray;
			}
			img{
				border-radius: 5px 5px 5px 5px;	
				margin-top: 15px;
			}
			h3{
				color: black;
			}
			p{
				color: #ff0000;
				font-size: 25px;
			}
			p#words{
				color: gray;
				font-size: 15px;
			}
			span{
				color: gray;
				font-size: 15px;
			}
			
			
			
			
			
			
			
			div#Search_Box{							
            margin-top: 50px;
			border: 1px solid #e3e3e3;
			border-radius: 5px;
			width: 220px;
			height: 50px;
			box-shadow: 0px 0px 5px 1px #afafaf;
			margin-bottom: 50px;}
			input{
			font-size: 16px;
			margin-left: 15px;
			margin-top: 13px;
			color: #595959;
			border: none;}
			button{
			width: 55px;
			height: 35px;
			font-size: 15px;
			margin-left: 155px;
			position: relative;
			top: -28px;
			border: 1px solid transparent;
			border-radius: 5px;
			background-color: #ff0000;
			color: #ffffff;}
		</style>
	</head>
	<body>
		<!-- div#product_card>mig+h3+p+p>span -->
		<div id="product_card">
			<img src="img/小米.jpg" alt="su7" width="260px" height="358px"/>
			<h3>小米SU7</h3>
			<p>¥279999.00</p>
			<p id="words">已有<span>10万+</span>人评价</p>
		</div>
	<hr />
	<div id="Search_Box">
			<input placeholder="搜索 京东商品"><button>搜索</button>
	</div>
	
	</body>
</html>